<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>七海后台管理系统</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <style>
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
       {{include "./common/header.html"}}
       {{include "./common/side-menu.html"}}
        <div class="layui-body">
            <!-- 内容主体区域 -->
           <div style="padding:15px">
            <!-- 准备一个和ECharts相匹配的dom -->
            <div id="main" style="width: 1000px;height: 400px;"></div>
        </div>
        </div>
       {{include "./common/footer.html"}}
    </div>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/plugins/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script>
        // $("tr:even").css("background-color", 'skyblue');
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
        // 初始化图表
      function loadGraph(cates,count){
       var myChart = echarts.init(document.getElementById('main'));
       var option ={
           title:{
               text:"文章数统计"
           },
           tooltip:{},
           legend:{
               data:['篇幅']
           },
           xAxis:{
               data:cates,
               textStyle:{
                 color:'#8B4500'
               }
           },
           yAxis:{},
           series:[{
               name:'篇幅',
               type:"bar",
               color:['#8Ee5EE'],
               data:count
           }]
       };
       myChart.setOption(option);
      }
      function initData(){
          let cate_names= []
          let counts = []
        // 发送ajax请求，获取文章分类的总数
        $.get('/cateArticleCount',res=>{
            res.forEach(item =>{
                if(item.cate_name){
                    cate_names.push(item.cate_name)
                    counts.push(item.count)
                }
            })
            console.log(cate_names,counts);
            //渲染图标
            loadGraph(cate_names,counts)
        },'json')
      }
      initData();
        // $("tr:even").css("background-color", 'skyblue');
        // document.getElementById('addBtn').onclick = function () {
        //     location.href = '/add'
        // }
        // function confirmDelete(id, img) {

        //     let result = layer.confirm('你真的要永久删除它吗，数据不可恢复', {
        //         btn: ['yes', 'no'],
        //         shadeClose: true,
        //         //第一个透明度,第二个是背景颜色
        //         shade: [0.5, '#ccc']
        //     }, () => {
        //         //确认触发
        //         location.href = "/delete?id=" + id + "&img" + img;
        //     }, () => {
        //         //  layer.msg("编辑失败",{icon:2});
        //         layer.msg('取消删除')
        //     });


        // }
        // //ajax异步永久删除
        // function ajaxDelete(ele, id, img) {
        //     layer.confirm('你真的要永久删除它吗，数据不可恢复', {
        //         btn: ['yes', 'no'],
        //         shadeClose: true,
        //         //第一个透明度,第二个是背景颜色
        //         shade: [0.5, '#ccc']
        //     }, () => {
        //         //确认触发
        //         // location.href = "/delete?id=" + id + "&img" + img;
        //         let xhr = new XMLHttpRequest();
        //         xhr.onreadystatechange = function () {
        //             if (this.readyState === 4 && this.status === 200) {
        //                 let data = JSON.parse(this.responseText);
        //                 let { code, message } = data;
        //                 if (code === 20000) {
        //                     // 删除成功,删除当前tr行
        //                     $(ele).parents('tr').remove()
        //                     setTimeout(function () {
        //                         layer.msg('删除成功', { icon: 1 })
        //                     }, 500)

        //                     layer.closeAll();
        //                 } else if (code === 30004) {
        //                     layer.msg(message)
        //                     location.href = "/login"
        //                 } else {
        //                     layer.msg('删除失败')
        //                 }
        //             }
        //         }
        //         xhr.open('post', '/ajaxdelete', true)
        //         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        //         xhr.send("id=" + id + "&img=" + img + "&flag=ajax")

        //     }, () => {
        //         layer.msg('不是')
        //     });
        // }


        // let avatarFile = document.getElementById("avatarFile")
        // let preview = document.getElementById('preview')
        // document.getElementById("updAvatar").onclick = function () {
        //     avatarFile.click();
        // }
        // avatarFile.onchange = function () {
        //     let file = this.files[0];
        //     if (!file) {
        //         return;
        //     }
        //     let formData = new FormData();
        //     formData.append('avatar', file);

        //     let xhr = new XMLHttpRequest();
        //     xhr.onreadystatechange = function () {
        //         if (this.readyState === 4 && this.status === 200) {
        //             let data = JSON.parse(this.responseText)
        //             let { message, code, src } = data
        //             layer.msg(message)
        //             preview.src = '/' + src;
        //         }
        //     }
        //     xhr.open('post', '/uploadAvatar', true)
        //     xhr.send(formData)
        // }


    </script>
</body>

</html>